<template>
	<view>
		<!-- 2：需要分组 -->
		<view v-if="brandTemp == 2">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<scroll-view class="top-menu-view marginTop20" scroll-x="true">
				<view class="menu-topic-view" v-for="(item,index) in moreData" :key="index">
					<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'" @click="swichMenu(index)">
						<text
							:class="currentTab==index ?'menu-topic-text-select':'menu-topic-text'">{{item.type_name}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="line-2"></view>
			<view class="content-view" v-for="(item,index) in moreData[currentTab].models" :key="index">
				<view class="item-text-name-view" @click="tap_item(item,moreData[currentTab].id)">{{item.name}}</view>
				<view class="line"></view>
			</view>
			
		</view>

		<!-- //1：无需分组 -->
		<view v-for="(item,index) in data" :key="index" v-else>
			<view class="item-box" @click="tap_item(item,data.id)">
				<view class="width100">
					<view class="content-row">
						<view class="text-name pad28-38 marginLeft38">{{item.name}}</view>
						<view class="text-price marginright38">{{item.guide_price}}万</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="line-2"></view>
		<view class="custom-text-class" style="padding-bottom: 180rpx;" @click="customClick()">自定义车型名称</view>
	</view>
</template>

<script>
	import {
		getUsedVehicleSeries,
		getUsedSearchModels,
		getUsedSearchSeries
	} from "@/api/brand.js"
	export default {
		data() {
			return {
				brandTemp: 0,

				data: [],



				moreData: [{
					"models": []
				}],

				currentTab: 0,

				series_id: '',
				brand_id: '',
				series_one_id: '',
				brand_name:''
			}
		},
		onLoad(option) {
			this.$utils.log("selectBrand3More   页面打印option   " + JSON.stringify(option))
			if (option.name) {
				uni.setNavigationBarTitle({
					title: option.name
				});
				this.series_one_id = option.series_one_id
				this.series_id = option.series_id
				this.brand_id = option.brand_id
				this.brand_name = option.brand_name
			}

			var that = this
			if (option.brand_type == 'search') {
				this.brand_type = 'search'
				getUsedSearchModels(option.series_id).then(res => {
					that.$utils.log(" 打印寻车 chexing    数据  " + JSON.stringify(res))
					if (res.code == 0) {
						if (res.data.type == 2) {
							that.currentTab = 0
							that.brandTemp = 2
							that.moreData = res.data.data
						} else {
							that.brandTemp = 1
							that.data = res.data.data
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			} else {
				this.brand_type = 'secondhand'
				getUsedVehicleSeries(option.series_id).then(res => {
					that.$utils.log("打印二手车数据  " + JSON.stringify(res))
					if (res.code == 0) {
						if (res.data.type == 2) {
							that.brandTemp = 2
							that.moreData = res.data.data
						} else {
							that.brandTemp = 1
							that.data = res.data.data
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}

		},
		methods: {
			swichMenu(index) {
				this.currentTab = index
			},
			tap_item(item, models_one_id) {
				this.$utils.log('打印点击的item   ' + JSON.stringify(item))
				// 获取当前页上的栈（数组形式）
				var pages = getCurrentPages()
				//上上上一页面 
				var prevPage = pages[pages.length - 4]
				item.MID = 1
				item.series_id = this.series_id
				if (this.brandTemp == 2) {
					item.models_one_id = models_one_id
				} else {
					item.models_one_id = item.source_type_id
				}

				item.series_one_id = this.series_one_id
				item.brand_id = this.brand_id
				item.brand_name = this.brand_name
				prevPage.$vm.backData(item) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack({
					delta: 3
				})
			},
			customClick() {
				let custom_name = ''
				if(this.brandTemp == 1){
					custom_name = this.data[0].custom_name
				}else if(this.brandTemp == 2){
					custom_name = this.moreData[this.currentTab].models[0].custom_name
				}
				uni.navigateTo({
					url: '/pages/home/selectBrand/selectBrandCustomModel/selectBrandCustomModel?series_id=' + this
						.series_id + '&brand_id=' + this.brand_id + '&brand_name=' + this.brand_name +
						'&series_one_id=' + this.series_one_id + '&custom_name=' + custom_name
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: white;
	}

	.custom-text-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
		margin: 44rpx 28rpx;
	}

	.item-text-name-view {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		opacity: 1;
		padding: 38rpx 0rpx;
	}

	.top-menu-view {
		white-space: nowrap;
		background-color: white;
		height: auto;

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 66rpx;
			position: relative;

			.menu-topic-text {
				padding: 10rpx 30rpx;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				opacity: 1;
			}

			.menu-topic-text-select {
				padding: 10rpx 30rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #0E59EA;
				opacity: 1;
			}

			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 50rpx;
					height: 8rpx;
					border-radius: 6rpx;
				}
			}

			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}

			.menu-topic-act .menu-topic-bottom-color {
				background: #3957BF;
			}
		}
	}

	.content-view {
		width: 100%;
		background-color: white;
		padding: 0rpx 28rpx;
	}

	.marginTop50 {
		margin-top: 60rpx;
	}

	.bac-F7 {
		background-color: #F7F8FA;
	}

	.pad20 {
		padding: 30rpx;
	}

	.height60 {
		height: 60rpx;
	}

	.line {
		width: 695rpx;
		height: 0rpx;
		border: 1px solid #000000;
		opacity: 0.03;
	}

	.line-2 {
		width: 100%;
		height: 28rpx;
		background: #F5F5F5;
	}

	.marginTop20 {
		margin-top: 20rpx;
	}



	.width100 {
		width: 100%;
	}

	.marginLeft38 {
		margin-left: 38rpx;
	}

	.marginright38 {
		margin-right: 38rpx;
	}

	.pad28-38 {
		padding: 28rpx 0rpx;
	}

	.margin28 {
		margin: 28rpx;
	}

	.bac-F4 {
		background-color: #F4F4F4;
	}

	.text-name {
		flex: 1;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		text-align: left;
	}

	.line {
		width: 695rpx;
		height: 0rpx;
		border: 1px solid #000000;
		opacity: 0.03;
	}

	.item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-price {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.content-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}
</style>